<template>
    <div class="dataP">
        <p class="dataP_p">{{ data.title }}</p>
        <div class="dataP_d" v-if="data.key == 'left'" v-for="item in numberFun(data.number)">{{ item }}</div>
        <div class="dataP_d" v-if="data.key == 'right'" v-for="item in numberFuns(data.number)">{{ item }}</div>
        <p class="dataP_p">{{ data.unit }}</p>
    </div>
</template>
<script>
export default {
    props: ["data"],
    data() {
        return {
        }
    },
    mounted() {
        // this.area()
    },
    methods: {
        numberFun(res) {
            let arr = res.split('')
            if (arr.length < 5) {
                let number = 5 - arr.length
                for (let index = 0; index < number; index++) {
                    arr.unshift("0")
                }
            }
            return arr
        },
        numberFuns(res) {
            let arr = res.split('')
            if (arr.length < 5) {
                let number = 5 - arr.length
                for (let index = 0; index < number; index++) {
                    arr.unshift("0")
                }
            }
            return arr
        }
    }
}
</script>
<style lang="scss" scoped>
.dataP {
    display: flex;
    align-items: center;
    height: 56px;

    .dataP_p {
        &:nth-child(1) {
            margin-right: 5px;
            width: 60px;
        }

        margin: 0px;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 14px;
        color: #D0E5F5;

    }

    .dataP_d {
        display: flex;
        align-items: center;
        justify-content: center;
        background: url("@/assets/sizeback.png");
        width: 50px;
        height: 56px;
        margin-right: 10px;
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 36px;
        color: #FFFFFF;
        text-shadow: 0px 3px 5px rgba(10, 42, 91, 0.61);
    }
}
</style>